<template>
  <div id="app" @contextmenu.prevent="this.showContextMenu=true">
    <el-row :gutter="15">
      <el-col :span="12">
        <!-- 天气预报 -->
        <Weather class="weather" :style="{height: slideFlag?'502px':'228px'}" @slide="slide"/>
        <!-- 财经资讯 -->
        <News class="news" style="margin-top: 15px;" :slideFlag="slideFlag" :style="{height: slideFlag?'426px':'700px'}" />
      </el-col>
      <el-col :span="12">
        <!-- 时钟/一言 -->
        <clock-yi-yan />
        <!-- 系统资源监控 -->
        <Monitor style="margin-top: 15px;" />
        <!-- 股票 -->
        <Stock style="margin-top: 15px;" />
      </el-col>
    </el-row>
    <div class="context-menu-container" v-show="showContextMenu" @click="this.showContextMenu = false">
      <div class="icon-container1" @click="refresh">
        <el-icon class="icon-menu" :size="50" color="rgb(255, 255, 255, 0.7)"><Refresh /></el-icon>
      </div>
      <div class="icon-container2">
        <el-icon class="icon-menu" :size="50" color="rgb(255, 255, 255, 0.7)"><Rank /></el-icon>
      </div>
      <div class="icon-container3" @click="quit">
        <el-icon class="icon-menu" :size="50" color="rgb(255, 255, 255, 0.7)"><switch-button /></el-icon>
      </div>
    </div>
  </div>
</template>

<script>
import Weather from './components/Weather'
import ClockYiYan from './components/ClockYiYan'
import News from './components/News'
import Monitor from './components/Monitor'
import Stock from './components/Stock'
import {
  Refresh, SwitchButton, Rank
} from '@element-plus/icons-vue'

export default {
  name: 'app',
  components: {
    Weather,
    ClockYiYan,
    News,
    Monitor,
    Stock,
    Refresh,
    Rank,
    SwitchButton
  },
  data() {
    return {
      slideFlag: false,
      showContextMenu: false
    }
  },
  methods: {
    slide() {
      this.slideFlag = !this.slideFlag
    },
    refresh() {
      window.ipcRenderer.send('contextMenu', 'refresh')
    },
    quit() {
      window.ipcRenderer.send('contextMenu', 'quit')
    }
  }
}
</script>

<style scoped>
@import "./assets/fonts/font.css";
#app {
  font-family: HarmonyOS_Sans_SC;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  user-select: none;
}
.weather {
  height: 228px;
  transition: height 2s !important;
}
.news {
  height: 700px;
  transition: height 2s !important;
}
.context-menu-container {
  background-color: rgb(120, 120, 120, 0.8);
  width: 815px;
  height: 943px;
  position: absolute;
  left: 8px;
  top: 8px;
  border-radius: 10px;
  display: flex;
  vertical-align: middle;
}
.icon-container1, .icon-container2, .icon-container3 {
  width: 70px;
  height: 70px;
  background-color: rgb(96, 98, 102);
  border-radius: 50px;
  position: relative;
  margin-top: 436px;
  cursor: pointer;
}
.icon-container1:hover, .icon-container2:hover, .icon-container3:hover {
  background-color: rgb(106, 108, 112);
}
.icon-container1 {
  margin-left: 267px;
  margin-right: 35px;
}
.icon-container2 {
  margin-right: 35px;
  -webkit-app-region: drag;
}
.icon-menu {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>